<template>
	<div id="setActivity"
        v-loading="fetchLoading"
		element-loading-text="拼命加载中..">
		<div class="content-box">
			<div class="content-title">
				<ul>
					<li><i class="fa fa-check-circle" aria-hidden="true"></i>新建活动</li>
					<li class="linebox"></li>
					<li><i class="fa fa-check-circle" aria-hidden="true"></i>选择模板</li>
					<li class="linebox"></li>
					<li class="active"><i class="fa fa-check-circle" aria-hidden="true"></i>活动设置</li>
				</ul>
			</div>
			<div class="set-box">
				<!--左侧手机模拟框-->
                <div class="container-left">
                    <div class="phone" >
                        <div class="bg-img" :style="'background-image:url('+this.$store.state.content.backgroundImg+')'"></div>
                    </div>
                </div>

                <!--右侧内容-->
                <div class="container-right" v-if="!groupNull">
                    <div class="right-content">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="内容设置" name="0">
                                <content-set :tplType="tplName"></content-set>
                            </el-tab-pane>
                            <el-tab-pane label="分组设置" name="1">
                                <group-set></group-set>
                             </el-tab-pane>
                            <el-tab-pane label="投票项设置" name="2">
                                <vote-set></vote-set>
                            </el-tab-pane>
                            <el-tab-pane label="渠道配置" name="3">
                                <share-set></share-set>
                            </el-tab-pane>
                            <el-tab-pane label="信息备注" name="4">
                                <remark-set></remark-set>
                            </el-tab-pane>
                            <el-tab-pane label="列表配置" name="5">
                                <list-config></list-config>
                            </el-tab-pane>
                            
                        </el-tabs>     

                    </div>
                    <div class="set-bottom" >
                        <el-button  class="save-btn" @click="saveContentSet">{{nextText}}</el-button>
                    </div>
                </div>

                <!--右侧内容 无投票分组-->
                <div class="container-right" v-else>
                    <div class="right-content">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="内容设置" name="0">
                                <content-set :tplType="tplName"></content-set>
                            </el-tab-pane>
                            <el-tab-pane label="投票项设置" name="1">
                                <vote-set></vote-set>
                            </el-tab-pane>
                            <el-tab-pane label="渠道配置" name="2">
                                <share-set></share-set>
                            </el-tab-pane>
                            <el-tab-pane label="信息备注" name="3">
                                <remark-set></remark-set>
                            </el-tab-pane>
                            <el-tab-pane label="列表配置" name="4">
                                <list-config></list-config>
                            </el-tab-pane>
                        </el-tabs>     
                    </div>
                    <div class="set-bottom" >
                        <el-button  class="save-btn" @click="saveContentSet">{{nextText}}</el-button>
                    </div>
                </div>

			</div>
		</div>

	</div>
</template>
<script>
	import contentSet  from './tpl/contentSet'
    import listConfig  from './tpl/listConfig'
    import shareSet  from './tpl/shareSet'
    import groupSet  from './tpl/groupSet'
    import voteSet  from './tpl/voteSet'
    import remarkSet  from './tpl/remark'
	import { baseImgPath,bgImg } from './../../config/env' 
	import * as api from './../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
		data(){
			return {
                fetchLoading:false, 
                activeName: '0',
                bgImgUrl:bgImg,
                tplName:'',

                groupNull:false,
                nextText:'下一步'
			}
		},
		watch:{
			activeName (a,b){
                if(this.groupNull){
                   if(a==4){
                        this.nextText='完成';
                    }else{
                        this.nextText='下一步';
                    } 
                } else{
                    if(a==5){
                        this.nextText='完成';
                    }else{
                        this.nextText='下一步';
                    } 
                }
            }
		},
		mounted(){ 
             
		}, 
        methods: {
            regDataGroup(){
                let vm = this;
                let flag=false;
                if((vm.$store.state.groupList.length!=vm.$store.state.groupData.length)){ 
                    flag =false;
                }else if((vm.$store.state.groupList.length==vm.$store.state.groupData.length)){
                    let groupB=vm.$store.state.groupData;
                    vm.$store.state.groupList.forEach((item,index)=>{
                        if(item.title!=groupB[index].title){ 
                            return flag=false;
                        }else{
                            flag=true;
                        }
                    })
                }else{
                    flag=true;
                }
                return flag;
            },
            //保存内容设置
			saveContentSet(){  
                let vm =this;
                if(vm.groupNull){
                    if(vm.activeName==4){
                        vm.postContent();
                        // console.log('保存');
                    }else{
                        vm.activeName=(parseInt(vm.activeName)+1).toString();
                    } 
                }else{
                    if(vm.activeName==5){
                        vm.postContent();
                    }else if(vm.activeName==1&&vm.$store.state.groupSwitch&&!vm.regDataGroup()){  
                        Message.error({message: '请先保存分组设置'});
                        vm.activeName='1'
                    }else{
                        vm.activeName=(parseInt(vm.activeName)+1).toString();
                    } 
                    if(vm.activeName==2){
                        vm.$store.state.voteTabs='0';  
                    } 
                } 
            },
            postContent(){
                let vm = this; 
                let from = new FormData();  
                from.append('limit[num]', vm.$store.state.content.lotteryNum);
                from.append('limit[type]', vm.$store.state.content.tagDetailValue);
                if(vm.tplName=='multiple-vote'){
                    from.append('limit[votes]', vm.$store.state.content.votesNum);
                }
                let groupIsOpen='';
                if(!vm.$store.state.content.groupSwitch){
                    groupIsOpen='';
                }else{
                    groupIsOpe=1;
                } 
                from.append('groupIsOpen',groupIsOpen);
                let appIsOpen=null;
                vm.$store.state.shares.implantApp? appIsOpen='on':appIsOpen='off';
                from.append('app[is_open]', appIsOpen);
                from.append('app[app_urls]', vm.$store.state.shares.appDownloadUrl);
   
                let wechatIsOpen=null;
                vm.$store.state.shares.implantWechat? wechatIsOpen='on':wechatIsOpen='off';
                from.append('wechat[is_open]', wechatIsOpen); 
                from.append('wechat[qr_code][0]', vm.$store.state.shares.codeImg);
 
                let shareIsOpen=null;
                vm.$store.state.shares.shareSwitch? shareIsOpen='on':shareIsOpen='off';
                from.append('share[is_open]', shareIsOpen);
                from.append('share[title]', vm.$store.state.shares.shareTitle);
                from.append('share[content]', vm.$store.state.shares.shareContent);
                from.append('share[thumb]', vm.$store.state.shares.shareIcon);

                from.append('category',2);
                from.append('model_id',vm.$route.query.model_id);
                from.append('template_id',vm.$route.query.tplModelId);
                from.append('activity_demoid',vm.$store.state.groupActId);
                from.append('action','vote');
                from.append('name',vm.$store.state.content.name);
                from.append('startTime',vm.timeDateMinutes(vm.$store.state.content.startTime));
                from.append('endTime',vm.timeDateMinutes(vm.$store.state.content.endTime));
                from.append('backgroundImg',vm.$store.state.content.backgroundImg);
                from.append('description',vm.$store.state.content.description);
                from.append('listBackgroundImg',vm.$store.state.listConfig.list_background_img);

                from.append('customId',vm.$store.state.infoRemark.customId);
                from.append('organizer',vm.$store.state.infoRemark.organizer);
                from.append('remark',vm.$store.state.infoRemark.remark);
                from.append('others',vm.$store.state.infoRemark.others);
                
                if(vm.contentSetReg()&&vm.appSetReg()&&vm.wxSetReg()){
                    vm.fetchLoading=true; 
                    api.editActivityVote(vm.$route.query.activityId,from).then(res=>{
                        vm.fetchLoading=false;
                        if(res.data.code==0){ 
                            vm.$router.push({name:'activityList'}); 
                        }
                    }).catch(function (err) {
                        vm.fetchLoading=false; 
                    });
                } 
            },
            //内容设置验证
			contentSetReg(){
				let num = /^\+?[1-9][0-9]*$/;　
                let stateList=this.$store.state.content;
				if(stateList.name==''){
					this.$message({showClose: true,message: '活动名称不能为空'});
					return false;
				}else if(stateList.startTime==''){
					this.$message({showClose: true,message: '请选择活动开始时间'});
					return false;
				}else if(stateList.endTime==''){
					this.$message({showClose: true,message: '请选择活动结束时间'});
					return false;
				}else if(stateList.lotteryNum==''||stateList.lotteryNum<=0||!num.test(stateList.lotteryNum)){
					this.$message({showClose: true,message: '抽奖次数必须是大于0的整数'});
					return false;
				}else if(stateList.description==''){
					this.$message({showClose: true,message: '活动规则不能为空'});
					return false;
				}else{
					return true;
				}
			},
            //开通app验证
			appSetReg(){ 
                let shares=this.$store.state.shares;
				let reg=/^(https|http|ftp|rtsp|mms):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/;
				if(shares.implantApp){
					if(shares.appDownloadUrl==''||!reg.test(shares.appDownloadUrl)){
						this.$message({showClose: true,message: '请输入正确的APP下载链接'});
						return false;
					}else if(this.$store.state.listConfig.list_background_img===''){
						this.$message({showClose: true,message: '列表缩略图不能为空'});
						return false;
					}else{
						return true;
					}
				}else{
					return true;
				}
			},
			
			//微信分享验证
			wxSetReg(){
				let shares=this.$store.state.shares;
				if(shares.shareSwitch){
					if(shares.shareIcon==''){
						this.$message({showClose: true,message: '分享图片不能为空'});
						return false;
					}else if(shares.shareTitle==''){
						this.$message({showClose: true,message: '分享标题不能为空'});
						return false;
					}else if(shares.shareContent==''){
						this.$message({showClose: true,message: '分享文案不能为空'});
						return false;
					}else{
						return true;
					}
				}else{
					return true;
				}
			},
            handleClick(tab, event) {
                let vm =this; 
                if(!vm.groupNull){
                    if(vm.$store.state.groupSwitch&&!vm.regDataGroup()){
                        Message.error({message: '请先保存分组设置'});
                    } 
                    if(tab.label=="投票项设置"){
                        vm.$store.state.voteTabs='0';  
                    } 
                }   
            },  
            fetchModelRule(id){
                let vm = this;
                vm.fetchLoading=true;
                api.getModelRule(id).then(res=>{
                    vm.fetchLoading=false;
                    if(res.data.code==0){
                        let resList=res.data.activity; 
                        //内容设置
                        vm.$store.state.content={
                            name:resList.name,  //活动名称
                            startTime:resList.startTime,//活动开始时间
                            endTime:resList.endTime, //活动结束时间
                            lotteryNum:JSON.parse(resList.limit).num,  //抽奖次数
                            backgroundImg:resList.backgroundImg,//背景(展示)
                            // backgroundImg:'',//背景(展示)
                            upBgImg:resList.backgroundImg,//背景 
                            tagDetailValue:JSON.parse(resList.limit).type,  //活动次数方式
                            description:resList.description, //活动规则
                        }; 
                        
                        //信息备注
                        vm.$store.state.infoRemark={
                        customId: resList.customId=='null'?'':resList.customId,// 自定义id
                        organizer:  resList.organizer=='null'?'':resList.organizer,//   组织方
                        remark:  resList.remark=='null'?'':resList.remark,//   备注
                        others:  resList.others=='null'?'':resList.others, //    其他
                        };
                        
                        let publishing=JSON.parse(resList.publishing_ways)
                        let sharesList=JSON.parse(resList.shares)  
                        let listIcon=''; 
                        if(resList.listBackgroundImg){
                            if(resList.listBackgroundImg.split('alioss:/')[0]!==''){ 
                                if(resList.listBackgroundImg.split('undefined')[0]!==''){
                                    listIcon=resList.listBackgroundImg  //列表缩略图     
                                }else if(resList.listBackgroundImg.split('undefined')[0]==''){
                                    listIcon=vm.bgImgUrl+resList.listBackgroundImg.split('undefined')[1] 
                                }else{
                                    listIcon=resList.listBackgroundImg  //列表缩略图   
                                }
                            }else{
                                listIcon=vm.bgImgUrl+resList.listBackgroundImg.split('alioss:/')[1] //列表缩略图     
                            } 
                        }else{
                            listIcon=''; 
                        } 
                        //列表配置 
                        vm.$store.state.listConfig={
                            list_background_img:listIcon
                        };
                        //渠道配置
                        vm.$store.state.shares={
                            //发布到APP
                            implantApp:publishing.app.is_open=='on'?true:false, 
                            appDownloadUrl:publishing.app.app_urls,//app下载链接
                            // listThumbnailIcon:listIcon,
                            //发布到微信
                            implantWechat:publishing.wechat.is_open=='on'?true:false, //发布到微信
                            codeImg:publishing.wechat.qr_code[0]=='null'?'':publishing.wechat.qr_code[0],
                            //微信分享
                            shareSwitch: sharesList.is_open=='on'?true:false,   //是否开启分享
                            shareTitle: sharesList.title,    //分享标题
                            shareIcon: sharesList.thumb=='null'?'':sharesList.thumb,    //分享的图片
                            shareContent: sharesList.content,    //分享文案
                        }; 
                        
                         //分组设置
                        vm.$store.state.groupSwitch=resList.groupIsopen==1?true:false;
                        //投票项设置
                        vm.$store.state.voteTabs='0'; 
                        vm.$store.state.groupData=resList.group;   //保存成功的分组 
                        let arrList=[];
                        resList.group.forEach((item,index)=>{
                            let obj={};
                            obj.title=item.title;
                            obj.type=item.type;
                            obj.group_id=item.group_id;
                            arrList.push(obj);
                        }); 
                        vm.$store.state.groupList=arrList;
                        if(resList.template.template=='multiple-vote'){
                            vm.tplName=resList.template.template;
                            vm.$store.state.content.votesNum=JSON.parse(resList.limit).votes
                        }
                        if(resList.template.template=='poll'||resList.template.template=='ballot'){
                            vm.groupNull=true;
                        }else{
                            vm.groupNull=false;        
                        }
                    }
                }).catch(function (err) {
					vm.fetchLoading=false; 
                    console.log(err);
					// vm.$router.push({name:'activityList'});
				});
            },  
        },
        components: {
			contentSet,
            listConfig,
            shareSet,
            groupSet,
            voteSet,
            remarkSet
		},
        computed: {
          	
        },
		beforeRouteEnter:function(to,from,next) {    //路由生命周期
			next(vm => { 
                if(vm.$route.query.activityId){
                    vm.$store.state.groupActId=vm.$route.query.activityId;   //活动临时id
					vm.fetchModelRule(vm.$route.query.activityId);
				}else{
					vm.$router.go(-1);
				} 
			})
		},
	}
</script>
<style>
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
</style>
<style lang="less" scoped>
	#setActivity{
    width:100%;
    min-height: 100%;
    background: #f4f8fb;
    padding: 20px 40px 50px;
    box-sizing: border-box;
    .content-box{
        min-width:900px;
        background: #ffffff;
        padding-bottom:20px;
        .content-title{
            padding-top:20px;
            line-height: 30px;
            margin-bottom: 20px;
            ul{
                margin: 0 auto;
                font-weight: 700;
                font-size: 18px;
                color:#888888;
                text-align: center;
                li{
                    display: inline-block;
                    padding-left: 5px;
                    padding-right: 5px;
                }
                li.active{
                    color:#5B7D9A;
                }
                .linebox{
                    width: 10%;
                    border-bottom: 1px solid #d0d0d0;
                    border-top: 1px solid #e9e9e9;
                    margin-bottom: 4px;
                }
            }
        }
        .set-box{
            width: 100%;
            height: auto;
            min-height: 600px;
            position: relative;
            .container-left{
                width: 275px;
                height: auto;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 0;
                padding-left: 15px;
                padding-top: 30px;
                .phone{
                    width: 240px;
                    height: 450px;
                    background: url(../../assets/img/phone-model.png) no-repeat;
                    background-size: 100%;
                    position: relative;  
                    .bg-img{ 
                        width: 229px;
                        height: 340px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: auto;
                        top: 65px;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        overflow: auto;
                    }
                }
            }
            .container-right{
            width: 100%;
            height: auto;
            padding-left: 275px;
                .right-content{
                    min-height: 300px;
                    border-left: 1px solid #efefef;
                    padding-left: 20px;
                }
            
            }
        }
    }
}
.set-bottom{
    text-align: center;
    margin-top:40px;
}
.save-btn{
    width: 150px;
    line-height: 34px;
    border-radius: 3px;
    padding: 0;
    color: #fff;
    font-size: 12px;
    background-color: #ec5463;
    height: 34px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;

}

</style>